<template>
  <div class="todo-footer">
    <label>
      <!-- <input type="checkbox" :checked="isAll" @change="checkAll"/> -->
      <input type="checkbox" v-model="isAll" />
    </label>
    <span>{{ isdoned }} <span>已完成</span> / 全部 {{ totallength }}</span>
    <button class="btn btn-danger" @click="clearAll">清除已完成任务</button>
  </div>
</template>

<script>
import { defineComponent, computed } from "vue";

export default defineComponent({
  name: "MyFooter",
  props: {
    todos: { type: Array },
  },
  setup(props, context) {
    //  doneTotal() {
    //   //此处使用reduce方法做条件统计
    //   /* const x = this.todos.reduce((pre,current)=>{
    // 			console.log('@',pre,current)
    // 			return pre + (current.done ? 1 : 0)
    // 		},0) */
    //   //简写
    //   return this.todos.reduce((pre, todo) => pre + (todo.done ? 1 : 0), 0);
    // },
    let isdoned = computed(() => {
      return props.todos.filter((todo) => todo.done).length;
    });
    let totallength = computed(() => {
      return props.todos.length;
    });
    let isAll = computed({
      get() {
        return totallength.value > 0 && isdoned.value == totallength.value;
      },
      set(value) {
        context.emit("checkAllTodo", value);
      },
    });
    const clearAll = () => {
      context.emit("clearAllTodo");
    };
    //控制全选框，用computed set get

    return { isAll, totallength, clearAll, isdoned };
  },
});
</script>

<style scoped></style>
